<template>
    <div class="fullScreen bg-c-g tx-s-14 tx-c-222">
        <m-header :msg="'会员购彩记录'"></m-header>
        <div class="flex-bap bg-c-wh padd-1" @click="openWeek()">
            <div class="iconSize-1 date"></div>
            <div class="mar-lr">{{index}}</div>
            <div class="iconSize-075" :class="{
                'arrow_right' : !sign,
                'arrow_down' : sign
            }"></div>
        </div>
        <div v-show="sign" class="week">
            <div class="white-5 tx-c">
                <div v-for="(item, i) in week" :key="i" @click="selDate(item)" :class="{
                    'tx-c-r' : index == item
                }">{{item}}</div>
            </div>
        </div>
        <div class="scroll bg-c-wh mar-t-5">
            <div class="flex-box flex-pj line-box bor-b-g" v-for="(item, i) in data" :key="i">
                <div>{{item.title}}</div>
                <div class="tx-c-r">{{item.total}}</div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import { isEmptyObject } from '../../common/js/common'
import { weekList, memberBuyList } from '../../common/js/axiosUtil' 
export default { 
    data() {
        return {
            index : '',
            sign : false,
            week : '',
            data : ''
        }
    },
    created() {
        this.getWeekList()
    },
    methods: {
        // 打开日期列表
        openWeek () {
            this.sign = !this.sign       
        },
        // 选择日期
        selDate (date) {
            this.index = date
            this.sign = !this.sign
            this.getMemberBuyList (date)
        },
        // 获取一周日期
        getWeekList () {
            let params = this.$params(0)
            weekList(params)
            .then((response)=> {
                if(response.data.code == "200"){
                    this.week = response.data.data
                    this.index = this.week[0]
                    this.getMemberBuyList(this.week[0])
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            });
        },
        // 获取购彩记录
        getMemberBuyList (date) {
            this.data = ''
            this.$toast('加载中...', 1000000)
            let params = this.$params(1)
            params.append('date', date)
            memberBuyList(params)
            .then((response)=> {
                this.$toastClose()
                if(response.data.code == "200"){
                    this.data = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            });
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll
        position : fixed
        top : 5.75rem
        bottom : 0
        width : 100%
        overflow: auto
    .scroll::-webkit-scrollbar
        display : none
    .week
        position : fixed
        top : 5.75rem
        bottom : 0
        width : 100%
        z-index : 500
        background : rgba(0, 0, 0, 0.5)
    .white-5
        line-height : 2.25rem
        background : rgba(225, 225, 225, 0.9)
    .mar-lr
        margin: 0 .5rem
    .line-box
        margin: 0 .75rem
        padding: 1rem 0
    .date
        background-image: url('../../common/image/hygcjl_time.png')
    .arrow_down
        background-image: url('../../common/image/arrow_down.png')
</style>

